import React, { PureComponent } from "react";
import { Flex, Tabs ,Toast,Badge} from "antd-mobile";
import s from "./index.scss";
import AxFooter from "components/Footer";
import AxHeader from "components/AxHeader";
import Paging from "components/Paging";
import shibaiPng from "assets/images/shibai.png";
import bgPng from "assets/images/xjq_bg.png";
import bgChoosePng from "assets/images/xjq_bg_choose.png";
import jxbgPng from "assets/images/jxq_bg.png";
import jxbgChoosePng from "assets/images/jxq_bg_choose.png";

import Modal from 'antd/lib/Modal';
import {hashHistory}  from 'React-Router'
import { callApi } from "app/utils";


export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      //分页数据
      info: {},
      coupon:{},
      myinvestsParams:{
        token:JSON.parse(localStorage.getItem('userData')).token,
        page: 1,
        pageSize: 10,
      },
      couponParams:{
        token:JSON.parse(localStorage.getItem('userData')).token,
        page: 1,
        pageSize: 10,
      },
      flag:true,
      tabs:[
        { title: '奖励金', sub: '1' },
        { title: <Badge dot>优惠券</Badge>, sub: '2' },
      ],
      visible: false,
      dialogTitle:'',
      modalData:{}
    };
    this.itemStr = this.itemStr.bind(this)

    this.showModal = this.showModal.bind(this)
    this.handleOk = this.handleOk.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
    
  }
  

  showModal(item) {
    this.setState({
      modalData:item,
      visible: true,
      dialogTitle:'优惠券详情'
    });
    

  }

  handleOk() {
    console.log('点击了确定');
    this.setState({
      visible: false,
    });
  }
  handleCancel(e) {
    console.log(e);
    this.setState({
      visible: false,
    });
  }



  componentDidMount() {
    this.requestList(this.state.myinvestsParams)
    this.requestCounponList(this.state.couponParams)
  }
//分页方法
  requestList(item){
    callApi('/bonus/goldcoin/list',item,"POST").then((data)=>{
      if(data.success==true){
        this.setState({
          info:data.data
        })
      }
    })
  }
  requestCounponList(item){
    callApi('/bonus/counpon/list',item,"POST").then((data)=>{
      if(data.success==true){
        this.setState({
          coupon:data.data
        })
      }
    })
  }
 
  handlePageFocus(e){
      this.setState({
        flag:false
      })
  }
  handlePageCouponFocus(e){
    this.setState({
      flag:false
    })
}

  handlePage(e){
    if(e.target.value>this.state.info.pageCount){
      Toast.info('没有那么多页面',1)
    }else{
      this.state.myinvestsParams.page = e.target.value
      this.forceUpdate()
      this.requestList(this.state.myinvestsParams)
    }
    
    this.setState({
      flag:true
    })

  }
  handleCouponPage(e){
    if(e.target.value>this.state.coupon.pageCount){
      Toast.info('没有那么多页面',1)
    }else{
      this.state.couponParams.page = e.target.value
      this.forceUpdate()
      this.requestCounponList(this.state.couponParams)
    }
    
    this.setState({
      flag:true
    })

  }

 
  pageBtn(opt){
    if(opt=='next'){
      if(this.state.info.pageCount<=this.state.myinvestsParams.page){
        Toast.info('没有下一页了',1)
        return false
      }else{
        let temp = ++(this.state.myinvestsParams.page)
       this.state.myinvestsParams.page = temp
      }
      
    }else if(opt=='prev'){
      if(this.state.myinvestsParams.page<=1){
        Toast.info('没有上一页了',1)
        return false
      }else{
        let temp = --(this.state.myinvestsParams.page)
        this.state.myinvestsParams.page =temp
      }
     
    }else if(opt=='first'){
      this.state.myinvestsParams.page = 1
    }else if(opt=='last'){
      this.state.myinvestsParams.page = this.state.info.pageCount
    }
    this.requestList(this.state.myinvestsParams)
  }
  pageCouponBtn(opt){
    if(opt=='next'){
      if(this.state.info.pageCount<=this.state.couponParams.page){
        Toast.info('没有下一页了',1)
        return false
      }else{
        let temp = ++(this.state.couponParams.page)
       this.state.couponParams.page = temp
      }
      
    }else if(opt=='prev'){
      if(this.state.couponParams.page<=1){
        Toast.info('没有上一页了',1)
        return false
      }else{
        let temp = --(this.state.couponParams.page)
        this.state.couponParams.page =temp
      }
     
    }else if(opt=='first'){
      this.state.couponParams.page = 1
    }else if(opt=='last'){
      this.state.couponParams.page = this.state.coupon.pageCount
    }
    this.requestCounponList(this.state.couponParams)
  }

  //分页方法
  itemStr(item,index){
    let that = this
      if(JSON.stringify(item)!='{}'){
        let d = item
          return <Flex.Item key={index} className={`${s.listItem}`}>
          <Flex.Item className={`${s.content}`}>
              <Flex.Item className={`${s.childItem}`}>
                    <Flex.Item className={`${s.left}`}>
                    <span  className={`${d.amount>0?'color26':'color8'}`}>￥{d.amount}</span>
                    </Flex.Item>
                    <Flex.Item className={`${s.right}`}>
                    <span className={`${d.amount>0?'color26':'color8'} `}>{d.amount>0?d.memo:`投资消费`}</span>
                    </Flex.Item>
              </Flex.Item>
          </Flex.Item>
          <Flex.Item className={`${s.title}`}>
                {d.consumeTime=="--"?d.invalidTime:d.consumeTime}&nbsp;&nbsp;{d.amount>0?'到期':'消费'} 
          </Flex.Item>
          <div className={`${s.block}`}></div>
        </Flex.Item>
      }
    
  }
  itemCouponStr(item,index){
    let that = this
      if(JSON.stringify(item)!='{}'){
        let d = item
     return (
        <Flex.Item
            key={index}
            className={`${s.item}`}
            style={{
              background: `url(${
               item.type==1? item.flag == true ? bgChoosePng : bgPng :item.flag == true ? jxbgChoosePng : jxbgPng
              }) no-repeat 100% 100%/100%`
            }}
            onClick={this.showModal.bind(this,item)}
          >
            <Flex.Item className={`${s.content}`}>
                {item.type==1? <div className={`${s.top}`}>
                   <span className={`color26`}><span className={`font24`}>{item.amount}</span>元</span> 现金
                </div>: <div className={`${s.top}`}>
                   <span className={`color26`}><span className={`font24`}>{item.increaseRate}</span>%</span> 加息
                </div>}
               
                <div>
                  <Flex.Item className={`${s.center}`}>
                      {item.desc}
                  </Flex.Item>
                  <Flex.Item className={`${s.bot}`}>
                      有效期至 {item.endTime}
                  </Flex.Item>
                </div>
               
            </Flex.Item>
          </Flex.Item>
        );
      }
    
  }

  render() {
    let { info ,coupon ,modalData} = this.state;
    let listStr
    let listCouponStr
    if(JSON.stringify(info)!='{}'){
      listStr = info.goldcoinList.map((item,index)=>{
        return this.itemStr(item,index)
      })
    }else{
      listStr = (
        <Flex className={`nullBox`} direction="column">
            <Flex.Item className={`nullItem flex8`}><img src={shibaiPng} /></Flex.Item>
            <Flex.Item className={`nullItem flex1`}>暂无投资记录</Flex.Item>
            <Flex.Item className={`nullItem flex1`}><div className={`btn`} onClick={()=>{
              hashHistory.push('/projectList')
            }}>去投资</div></Flex.Item>
        </Flex>
      )
      
    }

    if(JSON.stringify(coupon)!='{}'){
      listCouponStr = coupon.counponList.map((item,index)=>{
        return this.itemCouponStr(item,index)
      })
    }else{
      listCouponStr = (
        <Flex className={`nullBox`} direction="column">
            <Flex.Item className={`nullItem flex8`}><img src={shibaiPng} /></Flex.Item>
            <Flex.Item className={`nullItem flex1`}>暂无投资记录</Flex.Item>
            <Flex.Item className={`nullItem flex1`}><div className={`btn`} onClick={()=>{
              hashHistory.push('/projectList')
            }}>去投资</div></Flex.Item>
        </Flex>
      )
      
    }

   
   
    
    return (
      <div className={`${s.myRewardsBox}`}>
        <div style={{height:'100vh',width:"100%"}}>
          <AxHeader />
          <Tabs
            tabs={this.state.tabs}
            initialPage={0}
            onChange={(tab, index) => {
              console.log("onChange", index, tab);
            }}
            onTabClick={(tab, index) => {
              console.log("onTabClick", index, tab);
              this.state.myinvestsParams.state = index
              this.requestList(this.state.myinvestsParams)
            }}
          >
            <div>
              <Flex className={`${s.totalRewardsBox}`} direction="column">
                <Flex.Item className={`${s.top}`}>总奖励金额(元)</Flex.Item>
                <Flex.Item className={`${s.center}`}>￥0.05</Flex.Item>
                <Flex.Item className={`${s.bottom}`} onClick={()=>{
                  hashHistory.push('/my/rewardsRule')
                }}>奖励金规则</Flex.Item>
              </Flex>
              <Flex className={`${s.listBox}`} direction="column">
                  {listStr}
              </Flex>
              <Paging 
                handlePage={this.handlePage.bind(this)} 
                myinvestsParams={this.state.myinvestsParams} 
                info={info}
                pageBtn={this.pageBtn.bind(this)}
                flag={this.state.flag}
                handlePageFocus={this.handlePageFocus.bind(this)}/>
            </div>
            <div style={{height:'100vh',width:"100%"}}>
              <Flex className={`${s.couponList}`} direction="column">
                  {listCouponStr}
              </Flex>
              <Paging 
                handlePage={this.handleCouponPage.bind(this)} 
                myinvestsParams={this.state.couponParams} 
                info={coupon}
                pageBtn={this.pageCouponBtn.bind(this)}
                flag={this.state.flag}
                handlePageFocus={this.handlePageCouponFocus.bind(this)}/>
            </div>
          </Tabs>


          <Modal  title={this.state.dialogTitle} visible={this.state.visible}
           onCancel={this.handleCancel} footer={null}
        >
          <div>{modalData.type==1?<span>{modalData.amount}元现金劵</span>:<span>{modalData.increaseRate}%加息劵</span>}</div> 
          <div>来源: {modalData.title}</div> 
          <div>有效期至: {modalData.endTime}</div> 
          <div>
            {modalData.type==1?
            <span>1) 单笔投资{modalData.minInvest}元及以上可在投资中抵扣投资本金使用。</span>:
            <span>1) 单笔投资{modalData.minInvest}元及以上时使用，加息收益将在最后一期返还。</span>
            }
          </div> 
          <div>
              {modalData.type==1?
              (modalData.minLoanMonthCountUse!=0?<span>2) 该投资券仅可用于{modalData.minLoanMonthCountUse}个月及以上投资周期项目。</span>:<span>无投资周期限制</span>)
              :(modalData.minLoanMonthCountUse!=0?<span>2) 该投资券仅可用于{modalData.minLoanMonthCountUse}个月及以上投资周期项目。</span>:<span>无投资周期限制</span>)
              }
          </div> 
          
        </Modal>
        </div>

      <AxFooter base={true}/>
      </div>
    );
  }
}
